<template>

  <div>
    <div style="padding:10px;">
      <el-alert :closable="false" title="发布帖子" />
    </div>
    <div>
      <el-form ref="form" :model="post" label-width="80px">
        <el-form-item label="正文">
       <!--   <el-input v-model="post.mainText"></el-input>-->
          <el-input
            type="textarea"
            :rows="4"
            show-word-limit=true
            placeholder="请输入内容"
            maxlength=150
            v-model="post.mainText">
          </el-input>
        </el-form-item>


        <el-form-item label="点赞数">
          <el-input v-model="post.dianzanNum"></el-input>
        </el-form-item>
        <el-form-item label="配图">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>

</template>

<script>
  import {ApiService} from "@/api/apiService";


  export default {

    data() {
      return {
        imageUrl: '',
        post:{
          title:'',
          mainText:'',
          authorId:1,
          dianzanNum:null,
          pictureUrl:''
        }
      }
    },
    methods: {
      open2() {
        this.$message({
          message: '创建商品成功！',
          type: 'success'
        });
      },
      handleChange(row) {
        console.log(row);
        const updateGoodsWeight = new ApiService("/updateGoodsWeight")
        updateGoodsWeight.getParams({
          goodsId:row.id,
          goodsWeight:row.weight
        })

      },
      onSubmit() {
        console.log("提交")
        const inputPost = new ApiService("/inputPost")
        inputPost.getParams({
          userId:1,
          postText:this.post.mainText,
          postPictureUrl: this.imageUrl
        }).then(res=>{
          if(res.data.code==200){
            this.open2()
            location.reload();
          }else {
            console.log("插入失败")
          }
        })

      },
      //图片上传
      async beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        console.log(file);
        // const oss = new Ossutil();

        let OSS = require('ali-oss');

        let client = new OSS({
          region: 'oss-cn-chengdu',
          accessKeyId: 'LTAI5tKbKKZo33r8EpDqgGWH',
          accessKeySecret: 'wPzuRowwhcB7brUAwDfTcEIo8hAnBI',
          bucket: 'jingzai-pethome',
        });
        //此时可以自行将文件上传至服务器
        try {
          console.log(new Date().getTime())
          var ti = new Date().getTime()
          let result = await client.put('/img/' + ti + '.jpg', file)
          console.log(result)
          console.log("图片" + result.url)
          this.imageUrl = result.url
        } catch (e) {
          console.log(e);
        }
      },
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
